<template>
  <!--footer-->
  <footer>
    <div style="height: 73px"></div>
    <div class="footer-container" >
      <nav class="footer-list" @click="toTop">
        <router-link to="/home" :class="[{'footer-item':true},{ active:isClick === 1}]" >
          <i class="el-icon-house footer-icon"></i>
          <hgroup class="footer-title">首页</hgroup>
        </router-link>
        <router-link to="/home" :class="[{'footer-item':true},{ active:isClick === 2}]">
          <i class="el-icon-tickets footer-icon"></i>
          <hgroup class="footer-title">订单</hgroup>
          </router-link>
        <router-link  to="/mine" :class="[{'footer-item':true},{ active:isClick === 3}]">
          <i class="el-icon-user footer-icon"></i>
          <hgroup class="footer-title">我的</hgroup>
        </router-link>
      </nav>
    </div>
  </footer>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';

@Component({
  components: {}
})
export default class footerCom extends Vue {
  @Prop() isClick: number | undefined;
  private toTop(){
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: 'smooth'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
//footer
.footer-container{
  ul,ol,li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .router-link-active {
    text-decoration: none;
    color: black;
  }
  font-size: 13px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: #e0e0e0 1px solid;
  text-align: center; /*div的内容居中*/
  background-color: #fafafa;
  .footer-list {
    margin: 0;
    padding: 1px 0 ;
    display: flex;
    justify-content: space-between;
    .footer-item {
      list-style: none;
      padding: 0.5em 3em;
      display: flex;
      flex-direction: column;
      align-items: center;
      .footer-icon {
        pointer-events: none;
        font-size: 1.4em;
        color: black;
        margin-bottom: 2px;
      }
      .footer-title {

        pointer-events: none;
        color: #999999;
      }
    }
    .active {
      color: #55b6f4;
      .footer-icon {
        color: #55b6f4;
      }
      .footer-title {
        color: #55b6f4;
      }
    }
  }
}
</style>
